<template>
  <div class="app">
    <!-- 左下角两个按钮 -->
    <button class="btn bottom-btn init-btn" @click="goToInit">初始化</button>
    <button class="btn bottom-btn cache-btn" @click="goToList">缓存问卷</button>

    <!-- 右下角大按钮 -->
    <button class="btn start-btn" @click="goToFill">开始问卷</button>

    <!-- 初始化提示弹窗 -->
    <el-dialog title="提示" v-model="dialogToInitVisible" width="30%">
      <span>您有本地缓存问卷未上传，初始化将会清空本地缓存问卷，请及时上传。是否继续初始化？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="okHandle">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import { getSurveys, deleteSurvey } from "@/db/localDb"
import { ElMessage, ElMessageBox } from "element-plus"

const router = useRouter()

const dialogToInitVisible = ref(false)
const surveys = ref<any[]>([])

const goToFill = () => {
  router.push({ path: "/fill", query: { id: null } })
}
const goToList = () => router.push("/list")

const goToInit = async () => {
  // 初始化逻辑
  console.log("初始化触发")

  surveys.value = await getSurveys()
  if (surveys.value.length > 0) {
    // 如果有问卷，则上传问卷
    dialogToInitVisible.value = true
  } else {
    ElMessage.success(`初始化成功！`)
    // 刷新页面，重新加载数据
    window.location.reload()
  }
}

//确定事件
const okHandle = async () => {
  // 初始化逻辑
  console.log("清空缓存问卷数据...")
  for (const survey of surveys.value) {
    await deleteSurvey(survey.id)
  }
  ElMessage.success(`初始化成功！`)
  // 刷新页面，重新加载数据
  window.location.reload()
  dialogToInitVisible.value = false
}

//取消事件
const close = () => {
  console.log("取消清空缓存问卷数据...")
  dialogToInitVisible.value = false
}
</script>

<style scoped>
.app {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: url("/background.jpg") no-repeat center center;
  background-size: cover;
  overflow: hidden;
  /* 交互过渡 */
  transition: transform 0.1s ease, background-color 0.1s ease;
}

/* 通用按钮样式 */
.btn {
  position: absolute;
  padding: 1.5vh 2vw;
  font-size: 2.4vh;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 0.8vh;
  touch-action: manipulation;

  /* 交互过渡 */
  transition: transform 0.1s ease, background-color 0.1s ease;
}

/* 按下时的视觉反馈 */
.btn:active {
  transform: scale(0.95);
  background-color: rgba(0, 0, 0, 0.7);
}

/* 统一固定宽度并文字居中 */
.bottom-btn {
  /* width: 10vw; */
  text-align: center;
}

/* 左上角：初始化 按钮 */
.init-btn {
  bottom: 3vh;
  left: 18vw;
}

/* 左上角：缓存文件 按钮 */
.cache-btn {
  bottom: 3vh;
  left: 3vw;
}

/* 右下角：开始问卷 按钮 */
.start-btn {
  bottom: 3vh;
  right: 30vw;
  padding: 2vh 3vw;
  font-size: 3vh;
  background-color: rgba(0, 138, 255, 0.9);
}

/* 同样给“开始问卷”按钮按下时加反馈 */
.start-btn:active {
  transform: scale(0.95);
  background-color: rgba(0, 138, 255, 0.7);
}
.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
